<template>
  <div class="reg">
    <!-- Tab标签栏滚动 -->
    <van-sticky>
      <van-button>
        <van-row>
          <van-col span="22">
            <van-tabs>
              <van-tab title="推荐" name="g"> </van-tab>
              <van-tab title="一分科普" name="a"></van-tab>
              <van-tab title="问答" name="b"></van-tab>
              <van-tab title="鼻子" name="c"></van-tab>
              <van-tab title="眼睛" name="d"></van-tab>
              <van-tab title="玻尿酸" name="e"></van-tab>
              <van-tab title="减肥" name="f"></van-tab> </van-tabs
          ></van-col>
          <van-col span="2"><van-icon name="wap-nav" size="40" /></van-col>
        </van-row>
      </van-button>
    </van-sticky>
    <!-- 轮播 -->

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img
          :src="require('@/assets/10003.png')"
          alt=""
          width="360"
          height="150"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.1huazhuang.com%2Fd%2Ffile%2Fp%2F2020-07-11%2F1d14e58e1d7c2542.png&refer=http%3A%2F%2Fwww.1huazhuang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662722089&t=dbabedc383b641861797300739357851"
          alt=""
          width="360"
          height="150"
      /></van-swipe-item>
      <van-swipe-item>
        <img
          src="https://img0.baidu.com/it/u=3427262600,3552191211&fm=253&fmt=auto&app=138&f=PNG?w=539&h=312"
          alt=""
          width="360"
          height="150"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.itc.cn%2Fimages01%2F20200703%2F9cd52084ba87461eb079d48090fd17c4.jpeg&refer=http%3A%2F%2Fp3.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662722258&t=30f42b262095423fa29f4ef623e77585"
          alt=""
          width="360"
          height="150"
      /></van-swipe-item>
    </van-swipe>
    <!-- 文章 -->
    <dl>
      <dt>
        <img
          src="https://img2.baidu.com/it/u=4051329593,2809202808&fm=253&fmt=auto&app=138&f=JPEG?w=132&h=132"
          alt=""
        />
        <article>
          <p><b>女人30岁的皮肤管理怎么做?</b></p>
          <p>十个皮肤保养小技巧请查收!</p>
          <aside>
            <span>张青博士</span>
            <span>2019-09-19</span>
            <span>51阅读</span>
          </aside>
        </article>
      </dt>
      <dd>
        <span>赞(10000)</span>
        <span>评论(1000)</span>
        <span>转发(100)</span>
      </dd>
    </dl>
    <!-- 广告 -->
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgbdb3.bendibao.com%2Fjhbdb%2Fnews%2F20205%2F09%2F2020509114755_57200.png&refer=http%3A%2F%2Fimgbdb3.bendibao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662727580&t=e3238877c6e54a2bb2cd51cddeb77550"
      alt=""
      width="100%"
    />
    <dd>
      <span>赞(10000)</span>
      <span>评论(1000)</span>
      <span>转发(100)</span>
    </dd>
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0908%2F9c602be6j00qz3h7y0026d000v900fmp.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662728017&t=d8ec69a3e77c4896a460ce18948aa4b8"
      alt=""
      width="100%"
    />
    <dd>
      <span>赞(10000)</span>
      <span>评论(1000)</span>
      <span>转发(100)</span>
    </dd>
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F765a07504a3189c2af5968ef22a8baeef9e0d399.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662728152&t=973a925692e7b6da75ad562bbdba083b"
      alt=""
      width="100%"
    />
    <dd>
      <span>赞(10000)</span>
      <span>评论(1000)</span>
      <span>转发(100)</span>
    </dd>
    <ul>
      <p><b>西安吸脂瘦脸手术多少钱?</b></p>
      <p>"最佳答案</p>
      <p>
        爱美的女性都渴望拥有精致小巧的脸型,这样可以让五官显得更为好看。
        可是生活当中有些人由于天生脸型就长得比较肥胖,这样会影响到整体容
        貌的美观,因此很多的爱美者会通过做面部吸脂手术来瘦脸。通常来说西
        安面部吸脂的价格在5000-30000元左右,具体需要多少钱会受到自身情况
        以及选择的医院所影响
      </p>
    </ul>
    <figure>
      <dd>
        <span>一周前</span>
        <span>回答(1000)</span>
        <span>赞同(100)</span>
      </dd>
    </figure>
    <ol>
      <van-loading />
      <van-loading type="spinner" />
    </ol>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Tab,
  Tabs,
  Col,
  Row,
  Sticky,
  Swipe,
  SwipeItem,
  Card,
  Loading,
} from "vant";

Vue.use(Swipe);
Vue.use(Loading);
Vue.use(Card);
Vue.use(SwipeItem);
Vue.use(Col);
Vue.use(Row);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Sticky);
export default {
  data() {
    return {};
  },
  computed: {},
  watch: {},

  methods: {},
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
van-button {
  padding: 0;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
dl {
  width: 95%;
  margin-left: 2.5%;
}
dt {
  display: flex;
  width: 95%;
  background: #eee;
  padding: 2.5%;
}
dt img {
  width: 25%;
  margin-right: 2.5%;
}
article p {
  font-size: 14px;
}
aside {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

dd {
  display: flex;
  justify-content: end;
  margin: 10px 0;
}
dd span {
  display: block;
  margin-right: 10px;
  font-size: 12px;
}
ul {
  width: 95%;
  background: #eee;
  margin: 2.5%;
}
ul p {
  font-size: 12px;
  text-align: start;
  margin: 10px 0;
}
ul p:first-child {
  font-size: 16px;
}
figure dd span:first-child {
  margin-right: 40%;
  font-size: 12px;
}
ol {
  width: 100%;
  padding: 20px 0 100px;
}
</style>
